<script setup lang="ts">
import { computed, ref } from "vue";
import Typings from "@plugins/typings";

const data = ref({
  name: "",
  hobit: "",
  birth: "",
  project: [],
  slot: "slot",
});

const options = ref<Typings.Cascader.options[]>([
  {
    name: "云南项目",
    code: "yn",
    children: [
      {
        name: "招标",
        code: "yn-invitation",
      },
      {
        name: "投标",
        code: "yn-tender",
      },
      {
        name: "服务",
        code: "yn-service",
      },
    ],
  },
  {
    name: "太原项目",
    code: "ty",
    children: [
      {
        name: "招标",
        code: "ty-invitation",
      },
      {
        name: "投标",
        code: "ty-tender",
      },
      {
        name: "服务",
        code: "ty-service",
      },
    ],
  },
]);

const formJson = computed<Typings.SearchBar.JsonType[]>(() => {
  return [
    {
      el: "input",
      span: 8,
      prop: "name",
      label: "名称",
      placeholder: "请输入名称",
    },

    {
      el: "select",
      span: 8,
      prop: "hobit",
      label: "爱好",
      placeholder: "请选择爱好",
      options: [
        { name: "篮球", code: "1" },
        { name: "桌球", code: "2" },
      ],
      on: {
        change(code: string) {
          if (code === "1") {
            data.value.project = [];
          }
        },
      },
    },

    {
      el: "date-picker",
      span: 8,
      prop: "birth",
      label: "生日",
      placeholder: "请选择日期",
    },

    {
      isHide: () => {
        return data.value.hobit === "1";
      },
      el: "cascader",
      span: 8,
      prop: "project",
      label: "项目",
      placeholder: "请选择项目",
      options: options.value,
      on: {
        change: (codes, instance) => {
          console.log(codes);
          console.log(instance.cascaderPanelRef.checkedNodes);
        },
      },
    },

    {
      el: "slot",
      span: 8,
      prop: "slot",
      label: "插槽",
    },
  ];
});

const onSearch = (data) => {
  console.log(data);
};

const onrReset = (data) => {
  console.log(data);
};

const handleChange = () => {
  data.value.project = [];
};
</script>

<template>
  <div>
    {{ data }}
    <xt-search-bar
      v-model:data="data"
      :formJson="formJson"
      :collapse="false"
      @search="onSearch"
      @reset="onrReset"
    >
      <template #slot>
        <xt-input v-model="data.slot" placeholder="请输入内容" />
      </template>
    </xt-search-bar>
    <xt-button @click="handleChange">修改值</xt-button>
  </div>
</template>
